<!-- 登录页面 -->
<template>
  <div>
    <div class="w-full h-screen flex items-center justify-center bg-login">
      <el-form
        ref="formData"
        :model="formData"
        :rules="formRules"
        class="px-5 py-5 m-5 w-full lg:w-1/5 bg-white shadow-sm"
      >
        <el-form-item prop="account" class="mt-2">
          <el-input
            v-model="formData.account"
            prefix-icon="el-icon-user-solid"
            placeholder="账户"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="formData.password"
            prefix-icon="el-icon-lock"
            type="password"
            :show-password="true"
            placeholder="密码"
          />
        </el-form-item>

        <el-form-item prop="saveMe">
          <el-checkbox v-model="formData.saveMe">
            记住我
          </el-checkbox>
        </el-form-item>

        <el-button
          type="primary"
          style="width: 100%"
          class="mt-5"
          @click="submit"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue"
const formData = reactive({
    account: "",
    password: "",
    saveMe: false,
})
const formRules = reactive({
    account: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
})

const submit = () => {}
</script>

<style lang="scss" scoped>
.bg-login {
    background: url("../../assets/loginBg.png");
    background-size: 100vw 100vh;
}
</style>
